<style lang="scss" scoped>
.scroll-x {
    overflow-x: auto;
    position: absolute;
    z-index: 5;
    &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
    }
    .scroll-content {
        height: 1px;
    }
}
.scroll-y {
    z-index: 5;
    overflow-y: auto;
    position: absolute;
    right: 0;
    &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
    }
    .scroll-content {
        width: 1px;
    }
}
</style>
<template>
    <div class="scroll-box">
        <div
            :style="
                `width: ${xWidth}px;bottom:${scrollBottom}px;left:${xLeft}px`
            "
            class="scroll-x"
            ref="scroll-x"
        >
            <div
                :style="`width: ${xScrollWidth}px`"
                class="scroll-content"
            ></div>
        </div>

        <div
            :style="`height: ${yWidth}px;bottom:${scrollBottom}px`"
            class="scroll-y"
            ref="scroll-y"
        >
            <div
                :style="`height: ${yScrollHeight}px`"
                class="scroll-content"
            ></div>
        </div>
    </div>
</template>
<script>
export default {
    // data 在./_index.js 中已定义
    data(){
        return {
            flag: true
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.x = this.$refs["scroll-x"];
            this.y = this.$refs["scroll-y"];

            // 监听滚动条滚动table
            this.x.addEventListener("scroll", this.setScrollX);
            this.y.addEventListener("scroll", this.setScrollY);

            this.table.addEventListener("scroll", this.setScrollTable);
            this.mouse(this.table)
        });
    },
    methods: {
        // 拖拽X轴滚动table
        setScrollX() {
            if (this.flag) return
            this.table.scrollLeft = this.$refs["scroll-x"].scrollLeft;
        },
        // 拖拽Y轴滚动table
        setScrollY() {
            if (this.flag) return
            this.table.scrollTop = this.$refs["scroll-y"].scrollTop;
        },
        // table滚动就回显滚动条
        setScrollTable() {
            this.$refs["scroll-x"].scrollLeft = this.table.scrollLeft;
            this.$refs["scroll-y"].scrollTop = this.table.scrollTop;
        },
        mouse(el) {
            let self = this
            el.onmouseover = function() {
                self.flag = true
            }
            el.onmouseout = function() {
                self.flag = false
            }
        }
    },
    destroyed() {
        this.x.removeEventListener("scroll", this.setScrollX);
        this.y.removeEventListener("scroll", this.setScrollY);
        this.table.removeEventListener("scroll", this.setScrollTable);
    }
};
</script>
